/**
 *
 * @authors 前端小灰狼
 * @date    2020-12-10 16:48:28
 * @version v1.0
 * @description the core js of todolist project
 *
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试，see you next week！
// ...



const info = document.querySelector('ol')
const inp = document.querySelector('form>input')

var users = ['吃饭', '睡觉', '打豆豆']


bindHtml()
function bindHtml() {
    let str = ''
    users.forEach((item, index) => {
        str += `
        <li>
        <input type="checkbox" />
        <p>${item}</p>
        <a href="javascript:;" class="del" data-index = "${index}">-</a>
        </li>
        `
    })
    info.innerHTML = str
}


// 增加
inp.addEventListener(('keypress'), (e) => {
    e.preventDefault()
    let val = inp.value
    user = val
    if (!inp.value) return
    if (e.keyCode === 13) {
        users.push(user)
        bindHtml()
    }
})

const sec = document.querySelector('.sec')
console.log(sec)
const p = sec.querySelectorAll('ol>li>p')
console.log(p)
const inps = sec.querySelectorAll('ol>li>input')
console.log(inps)
sec.addEventListener('click', (e) => {
    // 删除
    if (e.target.className === 'del') {
        const ind = e.target.dataset.index
        users = users.filter(function (item, index) { return index != ind })
        bindHtml()
    }

    // 修改
    if (e.target.nodeName === 'P') {
        let str = '<input type="text" value="' + e.target.innerText + '">'
        e.target.innerHTML = str
        e.target.firstElementChild.onblur = function () {
            e.target.innerText = this.value
        }
    }

    if (e.target.nodeName === 'INPUT') {

    }
})




// const params = {
//     callback: 'fn'
// }

// function queryStringify(obj) {
//     let str = ''
//     for (let k in obj) {
//         str += k + '=' + obj[k] + '&'
//     }
//     return str.slice(0, -1)
// }

// getList()
// async function getList() {
//     const script = document.createElement('script')
//     // 2-2. 手动添加 src 属性
//     script.src = `https://api.i-lynn.cn/getlplnfo&${queryStringify(params)}`
//     document.body.appendChild(script)
//     script.remove()
// }
// function fn(res){
//     console.log(res)
// }










